<template>
	<!-- 创建活动 -->
	<view class="apply-pages fill-base">
		<block>
			<view class="apply-form">
				<view class=" mt-md radius-16">
					<view class="flex-between pl-lg pr-lg b-1px-b">
						<view class="item-text">标题</view>
						<input v-model="form.name" type="text" class="item-input flex-1" maxlength="20"
							:placeholder="rule[0].errorMsg" />
					</view>
					<!-- <view class="flex-between pl-lg pr-lg b-1px-b">
						<view class="item-input flex-1 flex-y-center">
							<view @tap.stop="form.type = index" class="flex-y-center" :class="[{'mr-lg':index==0}]"
								:style="{color:form.type == index ? primaryColor:''}" v-for="(item,index) in ['其他活动','婚恋交友']"
								:key="index"><i class="iconfont icon-xuanze mr-sm"
									:class="[{'icon-xuanze-fill':form.type == index}]"></i>{{item}}
							</view>
						</view>
					</view> -->
					<view class="flex-between pl-lg pr-lg b-1px-b">
						<view class="item-input flex-1 flex-y-center">
							<view @tap.stop="form.amount_type = index" class="flex-y-center" :class="[{'mr-lg':index==0}]"
								:style="{color:form.amount_type == index ? primaryColor:''}" v-for="(item,index) in ['免费','9.9','29.9','99','199']"
								:key="index"><i class="iconfont icon-xuanze mr-sm"
									:class="[{'icon-xuanze-fill':form.amount_type == index}]"></i>{{item}}
							</view>
						</view>
					</view>


					<view class="flex-between pl-lg pr-lg b-1px-b">
						<view class="item-text">活动开始时间</view>
						<!-- <input v-model="form.starttime" type="number" class="item-input flex-1" /> -->
						<picker mode="date" v-model="start_date"  start="2024-01-01" end="2100-12-31" 
						             @change="startdate"> {{ start_date }}</picker>
						<picker mode="time" v-model="start_time"  start="00:00" end="23:59"
						             @change="starttime"> {{ start_time }}</picker>
					</view>
					
					<view class="flex-between pl-lg pr-lg b-1px-b">
						<view class="item-text">活动结束时间</view>
						<!-- <input v-model="form.endtime" type="number" class="item-input flex-1" /> -->
						<picker mode="date" v-model="end_date" start="1900-01-01" end="2100-12-31"
						             @change="enddate"> {{ end_date }}</picker>
						<picker mode="time" v-model="end_time" start="1900-01-01" end="2100-12-31"
						             @change="endtime"> {{ end_time }}</picker>
					</view>
					<view class="flex-between pl-lg pr-lg b-1px-b">
						<view class="item-text">地址</view>
						<view class="item-input text flex-1">
							<view @tap.stop="toChooseLocation" class="flex-y-center text-right">
								<view class="flex-1 text-right">{{form.address || `点击右边图标设置`}}</view><i
									class="iconfont iconjuli ml-sm" :style="{color: primaryColor}"></i>
							</view>
						</view>
					</view>
					<view class="flex-between pl-lg pr-lg b-1px-b">
						<view class="item-text">详细地址</view>
						<input v-model="form.detail_address" type="text" class="item-input flex-1"
							:placeholder="rule[2].errorMsg" />
					</view>
					<view class="flex-between pl-lg pr-lg b-1px-b">
						<view class="item-text">分类</view>
						<view class="item-input text">
							<picker mode="multiSelector" range-key="name" @columnchange="colChange" :range="classList">
								<view style="height: 36px;line-height: 36px;">
							        {{form.one_classid_name + '-' + form.two_classid_name}}
							    </view>
							</picker>
						</view>
					</view>
					
				</view>

				<view class="mt-md radius-16">
					<view class="flex-between pl-lg pr-lg">
						<view class="item-text">活动照</view>
						<input :disabled="true" type="text" class="item-input flex-1" />
					</view>
					<view class="flex-between pl-lg pr-lg pb-md">
						<upload @upload="imgUpload" :imagelist="form.activity_photo" imgtype="activity_photo" text="上传图片"
							:imgsize="5">
						</upload>
					</view>
				</view>
				<view class="mt-md radius-16">
					<view class="flex-between pl-lg pr-lg">
						<view class="item-text">背景图片</view>
						<input :disabled="true" type="text" class="item-input flex-1" />
					</view>
					<view class="flex-between pl-lg pr-lg pb-md">
						<upload @upload="imgUpload" :imagelist="form.background_image" imgtype="background_image" text="上传图片"
							:imgsize="1">
						</upload>
					</view>
				</view>
				<view class="mt-md radius-16">
					<view class="flex-between pl-lg pr-lg">
						<view class="item-text">视频介绍</view>
						<input :disabled="true" type="text" class="item-input flex-1" />
					</view>
					<view class="flex-between pl-lg pr-lg pb-md">
						<upload @upload="imgUpload" @del="imgUpload" :imagelist="form.video_intro" filetype="video"
							imgtype="video_intro" text="上传视频" :imgsize="1">
						</upload>
					</view>
				</view>
				<view class="mt-md radius-16">
					<view class="flex-between pl-lg pr-lg">
						<view class="item-text">内容</view>
						<input :disabled="true" type="text" class="item-input flex-1" />
					</view>
					<textarea v-model="form.content" class="item-textarea pd-lg" maxlength="300" placeholder="请输入内容" />
					<view class="text-right pb-lg pr-lg">
						{{form.content.length>300?300:form.content.length}}/300
					</view>
				</view>
			</view>

			<view class="space-max-footer"></view>

			<!-- <auth :needAuth="userInfo && !userInfo.nickName" :must="true" type="userInfo" @go="submit" :style="{height: `${configInfo.tabbarHeight}px`}">
				<fix-bottom-button :text="[{text:'立即发布',type:'confirm'}]" bgColor="#fff"></fix-bottom-button>
			</auth> -->
			<view  @click="submit" :style="{height: `${configInfo.tabbarHeight}px`}">
				<fix-bottom-button :text="[{text:'立即发布',type:'confirm'}]" bgColor="#fff"></fix-bottom-button>
			</view>
		</block>
	
		<view class="space-footer"></view>
	</view>
</template>

<script>
	import wPicker from "@/components/w-picker/w-picker.vue";
	import $api from '@/api/index.js';
	import {
		mapState,
		mapActions,
		mapMutations
	} from "vuex"
	export default {
		components: {
			wPicker
		},
		data() {
			return {
				start_date:'2024-01-01',
				start_time:'00:00',
				end_date:'2024-01-01',
				end_time:'00:00',
				isAgree: false,
				options: {},
				title: {
					'-1': '您已经成功提交申请',
					'2': '您已经是服务了',
					'3': '平台管理员已取消授权'
				},
				image: {
					'-1': 'https://lbqny.migugu.com/admin/public/apply_wait.jpg',
					'2': 'https://lbqny.migugu.com/admin/public/apply_suc.jpg',
					'3': 'https://lbqny.migugu.com/admin/public/apply_fail.jpg'
				},
				form: {
					id: 0,
					name: '', //标题 
					type: 0, // 活动类型，1免费活动，2征婚活动
					amount_type: 0, //钱类型，0免费1,9.9，2,29.9，3,99，4,199
					address: '', //详细地址 
					lng: '', // 经度值
					lat: '',
					detail_address: '', //详细地址 
					one_classid: '6',
					one_classid_name: '交友',
					two_classid: '272',
					two_classid_name: '真诚',
					activity_photo: [], //活动照
					background_image: [], // 背景图
					video_intro: [], //视频介绍
					content: '' ,//内容 
					starttime:"",
					endtime:"",
				},
				rule: [{
						name: "name",
						checkType: "isNotNull",
						errorMsg: "请输入标题",
						regType: 2
					}, {
						name: "address",
						checkType: "isNotNull",
						errorMsg: "请选择地址"
					}, {
						name: "detail_address",
						checkType: "isNotNull",
						errorMsg: "请输入详细地址"
					}, 
					{
						name: "activity_photo",
						checkType: "isNotNull",
						errorMsg: "请上传活动照"
					},
					{
						name: "background_image",
						checkType: "isNotNull",
						errorMsg: "请上传背景图"
					},
					{
						name: "video_intro",
						checkType: "isNotNull",
						errorMsg: "请上传视频介绍"
					},
					{
						name: "content",
						checkType: "isNotNull",
						errorMsg: "请输入内容"
					},
				
				],
				lockTap: false,
				classList1: [
					{
						id: 6,
						name: "交友",
						image: "/static/main/01.png",
						path: "/service/pages/user-list?id=6",
					},
					{
						id: 2,
						name: "心灵",
						image: "/static/main/02.png",
						path: "/service/pages/user-list-other?id=2",
					},
					{
						id: 273,
						name: "疗愈",
						image: "/static/main/03.png",
						path: "/service/pages/user-list-other?id=273",
					},
					{
						id: 252,
						name: "娱乐",
						image: "/static/main/04.png",
						path: "/service/pages/user-list-other?id=252",
					},
					{
						id: 1,
						name: "课堂",
						image: "/static/main/05.png",
						path: "/service/pages/user-list-other?id=1",
					},
					{
						id: 14,
						name: "美食",
						image: "/static/main/06.png",
						path: "/service/pages/user-list-other?id=14",
					},
					{
						id: 7,
						name: "养生",
						image: "/static/main/07.png",
						path: "/service/pages/user-list-other?id=7",
					},
					{
						id: 3,
						name: "医美",
						image: "/static/main/08.png",
						path: "/service/pages/user-list-other?id=3",
					},
					{
						id: 16,
						name: "休闲",
						image: "/static/main/09.png",
						path: "/service/pages/user-list-other?id=16",
					},
					{
						id: 11,
						name: "食疗",
						image: "/static/main/10.png",
						path: "/service/pages/user-list-other?id=11",
					},
					{
						id: 10,
						name: "家政",
						image: "/static/main/11.png",
						path: "/service/pages/user-list-other?id=10",
					},
					{
						id: 17,
						name: "自媒体",
						image: "/static/main/12.png",
						path: "/service/pages/user-list-other?id=17",
					},
					{
						id: 15,
						name: "创业",
						image: "/static/main/13.png",
						path: "/service/pages/user-list-other?id=15",
					},
					{
						id: 287,
						name: "健身",
						image: "/static/main/14.png",
						path: "/service/pages/user-list-other?id=287",
					},
					{
						id: 253,
						name: "电影",
						image: "/static/main/15.png",
						path: "/service/pages/user-list-other?id=253",
					},
					{
						id: 284,
						name: "汽车",
						image: "/static/main/16.png",
						path: "/service/pages/user-list-other?id=284",
					},
					{
						id: 58,
						name: "科技",
						image: "/static/main/17.png",
						path: "/service/pages/user-list-other?id=58",
					},
					{
						id: 13,
						name: "旅游",
						image: "/static/main/18.png",
						path: "/service/pages/user-list-other?id=13",
					},
					{
						id: 286,
						name: "首饰",
						image: "/static/main/19.png",
						path: "/service/pages/user-list-other?id=286",
					},
					{
						id: 5,
						name: "酒店",
						image: "/static/main/21.png",
						path: "/service/pages/user-list-other?id=5",
					},
					{
						id: 289,
						name: "减肥",
						image: "/static/main/20.png",
						path: "/service/pages/user-list-other?id=289",
					},
					{
						id: 285,
						name: "房产",
						image: "/static/main/22.png",
						path: "/service/pages/user-list-other?id=285",
					},
					{
						id: 12,
						name: "维修服务",
						image: "/static/main/23.png",
						path: "/service/pages/user-list-other?id=12",
					},
					{
						id: 288,
						name: "康复理疗",
						image: "/static/main/24.png",
						path: "/service/pages/user-list-other?id=288",
					},
					{
						id: 18,
						name: "其它",
						image: "/static/main/25.png",
						path: "/service/pages/user-list-other?id=18",
					},
				],
				classList2: [],
				classList: []
			}
		},
		computed: mapState({
			primaryColor: state => state.config.configInfo.primaryColor,
			subColor: state => state.config.configInfo.subColor,
			configInfo: state => state.config.configInfo,
			userInfo: state => state.user.userInfo,
			location: state => state.user.location,
		}),
		async onLoad(options) {
			this.options = options
			
			this.classList[0] = this.classList1
			// 强制视图更新
			this.$set(this.classList, 0, this.classList1)
			let list = await this.$api.service.classList({
				class_id: this.classList[0][0].id
			});
			
			this.classList[1] = list
			// debugger
			// 强制视图更新
			this.$set(this.classList, 1, list)
			
			if(this.options.id){
				this.$util.showLoading()
				await this.initIndex()
			}
			this.$util.setNavigationBarColor({
				bg: this.primaryColor
			})
			uni.setNavigationBarTitle({
				title: options.id ? '编辑活动' : '创建活动'
			})
		},
		methods: {
			...mapActions(['getUserInfo']),
			async initIndex(refresh = false) {
				var param = {
					activit_id : this.options.id
				}
				let data = await this.$api.user.getActivitydetails(param)
				this.$util.setNavigationBarColor({
					bg: this.primaryColor
				})
				if (data && !data.id) {
					this.$util.hideAll()
					return
				}
				data.background_image = data.background_image.map(item => {
					return {
						path: item
					}
				})
				data.video_intro = data.video_intro.map(item => {
					return {
						path: item
					}
				})
				data.video = data.video && data.video.length > 0 ? [{
					path: data.video
				}] : []
				// for (let key in this.form) {
				// 	this.form[key] = data[key]
				// }
				this.$util.hideAll()
			},
			startdate(e){
				this.start_date=e.detail.value
			},
			starttime(e){
				this.start_time=e.detail.value
			},
			enddate(e){
				this.end_date=e.detail.value
			},
			endtime(e){
				this.end_time=e.detail.value
			},
			async colChange(e) {
				// 第一列，选择第一分类
				if (e.detail.column == 0) {
					let list = await this.$api.service.classList({
						class_id: this.classList[0][e.detail.value].id
					});
					// debugger
					this.form.one_classid = this.classList[0][e.detail.value].id
					this.form.one_classid_name = this.classList[0][e.detail.value].name
					this.classList[1] = list
					// 强制视图更新
					this.$set(this.classList, 1, list)
				}
				// 第二列，选择第二分类
				if (e.detail.column == 1) {
					// 选中二级分类id
					this.form.two_classid = this.classList[1][e.detail.value].id
					this.form.two_classid_name = this.classList[1][e.detail.value].name
				}
			},
			initRefresh() {
				this.initIndex(true)
			},
			imgUpload(e) {
				let {
					imagelist,
					imgtype
				} = e;
				this.form[imgtype] = imagelist;
			},
			// 选择地区
			async toChooseLocation(e) {
				await this.$util.checkAuth({
					type: 'userLocation'
				})
				let [, {
					address = '',
					longitude,
					latitude
				}] = await uni.chooseLocation();
				// debugger
				if (!address) return
				this.form.address = address
				this.form.lng = longitude
				this.form.lat = latitude
			},
			// 去管理/再次申请
			async confirm() {
				let page = {
					2: `/pages/mine`,
					3: `/technician/pages/apply`,
				}
				let url = page[coach_status]
				this.$util.log(url)
				this.$util.goUrl({
					url,
					openType: `reLaunch`
				})
			},
			//表单验证
			validate(param) {
				let validate = new this.$util.Validate();
				this.rule.map(item => {
					let {
						name,
					} = item
					validate.add(param[name], item);
				})
				let message = validate.start();
				return message;
			},
			async submit() {
				let param = this.$util.deepCopy(this.form)
				let msg = this.validate(param)
				// if (msg) {
				// 	this.$util.showToast({
				// 		title: msg
				// 	});
				// 	return;
				// }
				
				if(this.start_date === '' || this.end_date === '' || this.end_date === '' || this.end_time === ''){
					uni.showToast({
						title:'活动时间不能留空'
					})
				}
				
				param.starttime=this.start_date + ' ' + this.start_time
				param.endtime=this.end_date + ' ' + this.end_time
				
				param.type = this.form.type == 0 ? 1 : 2
				
				param.activity_photo = []
				this.form.activity_photo.forEach((item, index) => {
					param.activity_photo.push({imageurl: item.path})
				})
				
				// debugger
				if(this.form.background_image.length == 0){
					param.background_image = ''
				} else {
					param.background_image = this.form.background_image[0].path
				}
				if(this.form.video_intro.length == 0){					param.video_intro = ''				} else {					param.video_intro = this.form.video_intro[0].path				}
				// delete param.id_card_fan
				// delete param.id_card_people
				if (this.lockTap) return
				this.lockTap = true
				this.$util.showLoading()
				try {
					await this.$api.user.releaseActivity(param)
					this.$util.hideAll()
					this.$util.showToast({
						title: `提交成功`,
					})
					setTimeout(() => {
						this.$util.back()
						this.$util.goUrl({
							url: 1,
							openType: `navigateBack`
						})
					}, 1000)
				} catch (e) {
					setTimeout(() => {
						this.lockTap = false
						this.$util.hideAll()
					}, 2000)
				}

			}
		}
	}
</script>

<style lang="scss">
	.page-height {
		width: 100%;
		height: 100vh;
	}
	
	.bg-image {
	    position: absolute;
	    width: 100%;
	    height: 100%;
	    z-index: -1;
	}
	
	.popup-rule {
		width: 680rpx;
		height: auto;
	
		.rule-text {
			min-height: 300rpx;
			max-height: 60vh;
		}
	
		.iconfont {
			font-size: 60rpx;
		}
	}

	.item-btn {
		margin: 10rpx 50rpx;
		height: 82rpx;
		border-radius: 50rpx;
	}

</style>
